<template>
    <div class="AttendanceManagement">
        <pageTitle :title="title"/>
        <!-- 线条 -->
        <div class="line"></div>

        <div class="NewAdded">
            <div class="enelySpace">
                <div class="InputFlex">
                    <div class="inputFont">考勤組名稱</div>
                    <el-input v-model="input1" @click="in1" style="width: 240px" placeholder="請輸入" />
                </div>
                
                <div class="InputFlex">
                    <div class="inputFont">適用人員</div>
                    <el-input v-model="input2" @click="in2" style="width: 240px" placeholder="全部成員" :suffix-icon="Search"/>
                </div>
                
                <div class="InputFlex">
                    <div class="inputFont">考勤組負責人</div>
                    <el-input v-model="input3" @click="in3" style="width: 240px" placeholder="請選擇" :suffix-icon="Search"/>
                </div>
            </div>
        </div>

        <div class="AttendanceShift">
            <div class="AttendanceShiftDisplay">
                <pageTitle :title="classes" :textStyle="classesSize"/>  
                <div class="AttendanceShift-line"></div>
            </div>
           
            <div class="AttendanceShift-choose">
                <div class="choose">
                    <div class="ChooseInputFont">班次類別</div>

                    <el-radio-group v-model="radio">
                        <el-radio :value="3">固定班次</el-radio>
                        <el-radio :value="6">排班製</el-radio>
                        <el-radio :value="9">自由班制</el-radio>
                    </el-radio-group>
                </div>

                <div class="AttendanceShiftPopup">
                    <div class="ChooseInputFont">選擇班次</div>
                    <el-input v-model="input4" @click="in4" style="width: 240px" placeholder="默認班次：09:00 - 18:00"/>
                    <div>這是站位的</div>
                </div>
            </div>

            <div class="classeeFlex">
                <div class="ChooseInputFont">上下班時間設置</div>
                <div>
                    <el-table :data="tableData" style="width: 100%" >
                        <el-table-column label="工作日" prop="workday" width="300" />
                        <el-table-column label="班次時間段" prop="time" width="300" />

                        <el-table-column fixed="right" label="操作" min-width="120">
                            <template #default>
                                <el-button link type="primary" @click="EditChange">更改班次</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>

            <div class="CheckFont">
                <input type="checkbox" >法定節假日自動調休
            </div>

            <div class="mustORnomust">
                <div class="date">
                    必須打卡日期
                    <el-button link type="primary" @click="EditChange">+添加</el-button>
                </div>
                <div class="date">
                    無需打卡日期
                    <el-button link type="primary" @click="EditChange">+添加</el-button>
                </div>
            </div>
            
        </div>
       
        <div class="way">
            <div class="AttendanceShiftDisplay">
                <pageTitle :title="way" :textStyle="WaySize"/>  
                <div class="AttendanceShift-line"></div>
            </div>

            <div class="wayselect">
                <div>打卡条件</div>
                <div class="flex flex-wrap gap-4 items-center">
                    <el-select
                        v-model="value"
                        placeholder="Select"
                        size="large"
                        style="width: 240px"
                        >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>      
            </div>

            <div class="OfficeAttendance">
                <div>办公地址考勤</div>
                <el-button link type="primary" @click="EditChange">+添加地址</el-button>
            </div>

            <div class="OfficeAttendanceTable">
                <el-table :data="tableData" style="width: 100%" >
                    <el-table-column label="考勤組地点" prop="" width="300" />
                    <el-table-column label="有效范围" prop="" width="300" />

                    <el-table-column fixed="right" label="操作" min-width="120">
                        <!-- <template #default>
                            <el-button link type="primary" @click="edit">編輯</el-button>
                            <el-button link type="primary" @click="del">刪除</el-button>
                        </template> -->
                    </el-table-column>
                </el-table>
            </div>
        </div>

    </div>
</template>

<script setup>
import { ref,  onMounted } from 'vue';
import pageTitle from "@/components/pageTitle/pageTitle.vue";
import { Search } from '@element-plus/icons-vue';

//第一個標題
const title = '新增考勤組';
//第二個標題
const classes = '考勤班次'
const classesSize = {
    fontSize: '12px',
    fontWeight: 'bold',
}
//第三個標題
const way = '打卡方式'
const WaySize = {
    fontSize: '12px',
    fontWeight: 'bold',
}

//3個輸入框的值
const input1 = ref()
const input2 = ref()
const input3 = ref()
const input4 = ref()


const in1 = () =>{
    console.log(input1.value);
    
}

//radio的單選框
const radio = ref(3)

//上下班時間設置表格table
const tableData = ref([
    {
        workday:'週一',
        time:'夏季班次：09:00 - 12:00； 14:00 - 18:00；',
    },
    {
        workday:'週二',
        time:'夏季班次：09:00 - 12:00； 14:00 - 18:00；',
    },
    {
        workday:'週三',
        time:'夏季班次：09:00 - 12:00； 14:00 - 18:00；',
    },
    {
        workday:'週四',
        time:'夏季班次：09:00 - 12:00； 14:00 - 18:00；',
    },
    {
        workday:'週五',
        time:'夏季班次：09:00 - 12:00； 14:00 - 18:00；',
    },
])

const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

onMounted(() => {
    
})
</script>

<style lang="less" scoped>
.AttendanceManagement {
    padding: 20px;
    background-color: #fff;

    .line{
        width: 100%;
        height: 2px;
        background-color: grey;
        margin-top: 20px;
    };

    .NewAdded{
        width: 100%;
        height: 7.5rem;
        margin-top: 30px;

        .enelySpace{
            height: 7.25rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 25px;
        }

        .InputFlex{
            width: 20.125rem;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: space-evenly;

            .inputFont{
                width: 120px;
                justify-content: flex-end;
                color: gray;
                font-size: 12px;
            }
        }

        :deep(.el-input__wrapper){
            width: 14.5rem;
        }
    }
    
    .AttendanceShift{
        margin-top: 30px;

        .AttendanceShiftDisplay{
            display: flex;
            align-items: center;
            margin-left: 15px;

            .AttendanceShift-line{
                width: 95%;
                height: 2px;
                background-color: grey;
            }
        }

        .AttendanceShift-choose{
            height: 80px;
            width: 400px;
            margin-top: 20px;
            margin-left: 20px;

            .choose{
                display: flex;
                align-items: center;
                justify-content: space-around;

                .ChooseInputFont{
                    color: gray;
                    font-size: 12px;
                }
            }

            .AttendanceShiftPopup{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-left: 9px;

                .ChooseInputFont{
                    color: gray;
                    font-size: 12px;
                }
            }
        }

        .classeeFlex{
            display: flex;

            .ChooseInputFont{
                color: gray;
                font-size: 12px;
                margin-left: 28px;
            }
        }

        .CheckFont{
            color: gray;
            font-size: 12px;
            display: flex;
            align-items: center;
            margin-left: 30px;
            margin-top: 16px;
        }

        .mustORnomust{
               height: 3.125rem;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                margin-left: 25px;
                margin-top: 15px;

            .date{
                color: gray;
                font-size: 12px;
            }
        }   
    }

    .way{
        margin-top: 30px;

        .AttendanceShiftDisplay{
            display: flex;
            align-items: center;
            margin-left: 15px;

            .AttendanceShift-line{
                width: 95%;
                height: 2px;
                background-color: grey;
            }
        }

        .wayselect{
            width: 300px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-left: 20px;
            color: gray;
            font-size: 12px;
        }

        .OfficeAttendance{
            width: 9.75rem;
            color: gray;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            margin-left: 20px;
        }

        .OfficeAttendanceTable{
            margin-top: 20px;
        }
    }
}
</style>